<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .kangbazi{
            width: 500px;
            height: 300px;
            background-color: orange;
        }

        .niua{
            color:white;
            font-size:20px;
        }

        .niuc{
            font-family: '微软雅黑';
        }
    </style>
</head>
<body>
    <div id="no1" class="kangbazi">
        asfasdfsdaff
    </div>
    <script>
        // var divele = document.querySelector('div');
        // alert(divele.className)

        // var divele = document.getElementsByClassName('kangbazi')[0]; //伪数组
        // alert(divele.id);

        // 操作类名  读取  
        // 根据标签获取元素
        // var divele = document.querySelector('div');
        // // alert(divele.class); //undefined 
        // // alert(divele.className); //kangbazi 

        // divele.className = 'niux'

        // divele.className += ' niua';
        // divele.className += ' niuc';

        var divele = document.querySelector('div');

        // console.log(divele.classList);// 是个伪数组 包裹这个元素的所有class

        divele.classList.add('niuc');
        divele.classList.add('niua');


        divele.classList.remove('niua')


    </script>
</body>
</html>